<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:v-popover="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>桌台管理</title>
    <link rel="stylesheet" href="../../../../static/css/element.css" th:href="@{/css/element.css}">
    <link rel="stylesheet" href="../../../../static/css/global.css" th:href="@{/css/global.css}"/>
    <link rel="stylesheet" href="../../../../static/css/main.css" th:href="@{/css/main.css}"/>
    <link rel="stylesheet" href="../../../../static/css/myelement.css" th:href="@{/css/myelement.css}"/>
    <script src="../../../../static/js/vue.js" th:src="@{/js/vue.js}"></script>
    <script src="../../../../static/js/element.js" th:src="@{/js/element.js}"></script>
    <script src="../../../../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
    <script src="../../../../static/js/jquery.nestable.js" th:src="@{/js/jquery.nestable.js}"></script>
</head>
<body>
<div id="app">
    <div class="main-content" v-cloak>
        <!-- 页面头部 -->
        <div class="page-header">
            <h1 class="page-title">桌台管理</h1>
            <div class="z-pop_question">
                <el-popover
                        ref="popoverq"
                        placement="bottom-start"
                        width="400"
                        trigger="hover">
                    <p class="z-jiao">
                        1. 查看桌台列表
                        2. 包括桌台的状态，最多就餐人数，名称，编号
                        <a href="javascript:;">查看更多帮助</a>
                    </p>
                </el-popover>
                <i v-popover:popoverq class="el-icon-question"></i>
            </div>
            <div class="breadcrumb"><a href="javascript: top.location.reload();">首页</a><span>/</span>桌台<span>/</span>桌台管理</div>
        </div><!-- 页面头部 end -->

        <div class="list-content">
            <!--条件筛选-->
            <div class="content_item_filter clearfix" :class="[hasfilterMore?'content_filter_more':'']">
                <div class="input-select fl btn-radid_none">
                    <div class="filter-form filter-form-one clearfix">
                        <el-input placeholder="桌台编号/桌台名称" v-model="conditions['name#no'].value" clearable class="minW40 z_input-holder"></el-input>
                        <el-select placeholder="所属商户" v-model="conditions.vendorUuid.value" clearable class="z_select-holder" @change="vendorSelect">
                            <el-option v-for="vendor in vendorList"
                                       :key="vendor.uuid"
                                       :label="vendor.vendorName"
                                       :value="vendor.uuid">
                            </el-option>
                        </el-select>
                        <el-select placeholder="桌台类型" v-model="conditions.typeUuid.value" v-bind:disabled="disabledType" clearable class="z_select-holder" @visible-change="validateVendor">
                            <el-option v-for="type in typeList"
                                       :key="type.uuid"
                                       :label="type.name"
                                       :value="type.uuid">
                            </el-option>
                        </el-select>
                        <el-select placeholder="使用状态" v-model="conditions.usingStatus.value" clearable class="z_select-holder">
                            <el-option v-for="state in stateList"
                                       :key="state.value"
                                       :label="state.name"
                                       :value="state.value">
                            </el-option>
                        </el-select>
                    </div>
                    <div class='filter-form filter-form-more clearfix' v-show="filterMore"></div>
                    <div class="filter-operate">
                        <div class="filter-more" @click="toggleMoreSearch" v-show="hasfilterMore"><i :class="[filterMore?'el-icon-arrow-up':'el-icon-arrow-down']"></i></div>
                        <el-tooltip class="item" content="查询" placement="bottom-start">
                            <el-button icon="el-icon-search" @click="handleQuery"></el-button>
                        </el-tooltip>
                        <el-tooltip class="item" content="清空" placement="bottom-start">
                            <el-button icon="el-extend-clean" @click="handleClear"></el-button>
                        </el-tooltip>
                    </div>
                </div>
                <div class="filter-btn fr">
                    <el-button type="primary" @click="showDailog">新增桌台</el-button>
                </div>
            </div>

            <!--主体表格-->
            <div class="z-tables">
                <el-table ref="multipleTable" :data="dinnerList" style="width: 100%;">
                    <el-table-column fixed label="序号" type="index" class-name="z-opt_btn"></el-table-column>
                    <el-table-column prop="vendorName" label="商户名称" min-width="120"></el-table-column>
                    <el-table-column prop="typeName" label="桌台类型" min-width="120"></el-table-column>
                    <el-table-column prop="no" label="桌台编号" min-width="120"></el-table-column>
                    <el-table-column prop="name" label="桌台名称" min-width="120"></el-table-column>
                    <el-table-column prop="maxPerson" label="最大容纳人数" min-width="120"></el-table-column>
                    <el-table-column label="使用状态" min-width="120">
                        <template slot-scope="scope">
                                <template v-if="scope.row.usingStatus == '1'">
                                    占用
                                </template>
                                <template v-else>
                                    空闲
                                </template>
                        </template>
                    </el-table-column>
                    <el-table-column prop="bookingType" label="锁定状态" min-width="120">
                        <template slot-scope="scope">
                            <template v-if="scope.row.usingStatus == '0'">
                                未锁定
                            </template>
                            <template v-if="scope.row.usingStatus == '1'">
                                就餐中
                            </template>
                            <template v-if="scope.row.usingStatus == '2'">
                                已锁定
                            </template>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="创建时间" min-width="180" class-name="table-operate-td">
                        <template slot-scope="scope">
                            <div class="table-info">{{ scope.row.createTime }}</div>
                            <div class="table-operate">
                                <el-button type="primary" @click="editDailog(scope.$index, scope.row)">编辑</el-button>
                                <span class="table-spea-line">|</span>
                                <el-button type="primary" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <!--分页-->
            <div class="grid-content">
                <div class="bg-purple-light">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="pageSizeList"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next"
                            :total="totalNum">
                    </el-pagination>
                </div>
            </div>
            <!-- 新增模态框 -->
            <el-dialog :title="openText" :visible.sync="dialogFormVisible">
                <el-form :model="dinnertable" :rules="rules" ref="dinnertable-form" label-width="100px" class="demo-ruleForm el-input-95">
                    <el-form-item hidden label="ID" prop="uuid">
                        <el-input v-model="dinnertable.uuid"></el-input>
                    </el-form-item>
                    <el-form-item hidden label="vendorId" prop="vendorUuid">
                        <el-input v-model="dinnertable.vendorUuid"></el-input>
                    </el-form-item>
                    <el-form-item prop="vendorUuid" label="所属商户">
                        <el-select placeholder="所属商户" v-model="dinnertable.vendorUuid" clearable class="z_select-holder" @change="vendorSelect1">
                            <el-option v-for="vendor in vendorList1"
                                       :key="vendor.uuid"
                                       :label="vendor.vendorName"
                                       :value="vendor.uuid">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="typeUuid" label="桌台类型">
                        <el-select placeholder="桌台类型" v-model="dinnertable.typeUuid" v-bind:disabled="disabledType1"clearable class="z_select-holder" @visible-change="validateVendor1">
                            <el-option v-for="type in typeList1"
                                       :key="type.uuid"
                                       :label="type.name"
                                       :value="type.uuid">
                            </el-option>
                        </el-select>
                        <!--<el-radio-group v-model="dinnertable.typeUuid" size="mini" :model="typeList1">
                            <el-radio-button v-for="(item,index) in typeList1"
                                      size="small"
                                      style="margin-left: 0px;"
                                      border
                                      :key="item.uuid"
                                      :label="item.uuid">
                                {{item.name}}
                            </el-radio-button>
                        </el-radio-group>-->
                    </el-form-item>
                    <el-form-item label="桌台编号" prop="no">
                        <el-input v-model="dinnertable.no"></el-input>
                    </el-form-item>
                    <el-form-item label="桌台名称" prop="name">
                        <el-input v-model="dinnertable.name"></el-input>
                    </el-form-item>
                    <el-form-item label="最大容纳人数" prop="maxPerson">
                        <el-input v-model="dinnertable.maxPerson"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer" id="addDialog" style="display: none">
                    <el-button @click="save" type="primary">确定</el-button>
                    <el-button @click="dislogHide">取消</el-button>
                </div>
                <div slot="footer" class="dialog-footer" id="editDialog" style="display: none">
                    <el-button @click="update" type="primary">确定</el-button>
                    <el-button @click="dislogHide">取消</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</div>
</body>
<script th:inline="javascript">
    app = new Vue({
        el: "#app",
        data: {
            loading: true,
            openText: "",
            dialogFormVisible: false,
            categoryId:[[${categoryId}]],
            stateList:[
                {
                    name:"使用",
                    value:"1"
                },{
                    name:"空闲",
                    value:"0"
                }
            ],
            valueId: '',
            valueState: '',
            tableAllCheck: false,  // table 下方批量操作全选
            hasfilterMore: false,  // 列表是否拥有更多筛选条件
            filterMore: false,  // 列表更多筛选条件是否展示
            conditions: {
                "name#no": {
                    "operation": "ORLIKE",
                    "value": ""
                },
                "usingStatus": {
                    "operation": "EQ",
                    "value": undefined
                },
                "vendorUuid":{
                    "operation":"EQ",
                    "value":undefined
                },
                "typeUuid":{
                    "operation":"EQ",
                    "value":undefined
                }
            },
            dialogVisible: false,
            pageSizeList: [5, 10, 20, 50],
            totalNum: 0,
            currentPage: 1, //当前页码数
            pageSize: 10,
            dinnertable:{},
            dinnerList:[],
            typeList:[],
            vendorList:[[${vendorList}]],
            typeList1:[],
            vendorList1:[[${vendorList}]],
            disabledType:false,
            disabledType1:true,
            // 定义表单字段的校验规则
            rules: {
                vendorUuid: [
                    {required: true, message: "请选择所属商户", trigger: 'blur'},
                ],
                typeUuid: [
                    {required: true, message: "请选择桌台类型", trigger: 'blur'},
                ],
                no: [
                    {required: true, message: "请输入桌台编号", trigger: 'blur'},
                    {min:2, max:20, message: '桌台编号2到20个字符', trigger: 'blur'}
                ],
                name: [
                    {required: true, message: "请输入桌台名称", trigger: 'blur'},
                    {min:2, max:20, message: '桌台名称2到20个字符', trigger: 'blur'}
                ],
                maxPerson: [
                    {required: true, message: "请输入最大容纳人数", trigger: 'blur'},
                    {
                        validator(rule, value, callback, source, options) {
                            var errors = [];
                            if (!/^[a-z0-9]+$/.test(value)) {
                                callback('此处必须为数字值');
                            }
                            callback(errors);
                        }
                    }
                ],
            }
        },
        created: function () {
            this.queryList();
        },
        methods: {
            // typeList 条件选择框，点击出现下拉的时候要判断，商户是否已经选择
            validateVendor:function(show){
                if(show){
                    if(this.conditions.vendorUuid.value == ""||this.conditions.vendorUuid.value == undefined){
                        this.$message({
                            duration: 1500,
                            message: '请先选择所属商户!',
                            type: 'waring',
                            customClass: 'message-center'
                        });
                        return;
                    }
                }
            },
            // typeList1 条件选择框，点击出现下拉的时候要判断，商户是否已经选择
            validateVendor1:function(show){
                if(show){
                    if(this.dinnertable.vendorUuid == ""||this.dinnertable.vendorUuid == undefined){
                        this.$message({
                            duration: 1500,
                            message: '请先选择所属商户!',
                            type: 'waring',
                            customClass: 'message-center'
                        });
                        return;
                    }
                }
            },
            // 隐藏dialog
            dislogHide: function () {
                this.dialogFormVisible = false;
            },
            // 保存桌台
            save: function () {
                let self = this;
                self.$refs['dinnertable-form'].validate((valid) => {
                    if (valid) {
                        $.ajax({
                            url: "/backstage/cater/dinnertable/add",
                            type: "POST",
                            data: JSON.stringify(self.dinnertable),
                            contentType: "application/json;charset=UTF-8",
                            dataType: "json",
                            success: function(data) {
                                if (data && data.returnCode == "1") {
                                    self.$message({
                                        message: '新增桌台成功',
                                        type: 'success',
                                        duration: 1000,
                                        customClass: 'message-center',
                                        onClose: function () {
                                            window.location.href = '/backstage/cater/dinnertable/tolist?vendorId='+ self.vendorId;
                                        }
                                    });
                                } else {
                                    self.$message({
                                        message: data.returnNote,
                                        type: 'error',
                                        duration: 2000,
                                        customClass: 'message-center',
                                        onClose: function () {
                                            window.location.href = '/backstage/cater/dinnertable/tolist?vendorId='+ self.vendorId;
                                        }
                                    });
                                }
                            }
                        });
                    }
                });
            },
            // 修改桌台
            update: function () {
                var self = this;
                self.$refs['dinnertable-form'].validate((valid) => {
                    if (valid) {
                        $.ajax({
                            url: "/backstage/cater/dinnertable/edit",
                            type: "POST",
                            data: JSON.stringify(self.dinnertable),
                            contentType: "application/json;charset=UTF-8",
                            dataType: "json",
                            success: function(data) {
                                if (data && data.returnCode == "1") {
                                    self.$message({
                                        message: '编辑桌台成功',
                                        type: 'success',
                                        duration: 1000,
                                        customClass: 'message-center',
                                        onClose: function () {
                                            window.location.href = '/backstage/cater/dinnertable/tolist?vendorId='+ self.vendorId;
                                        }
                                    });
                                } else {
                                    self.$message({
                                        message: data.returnNote,
                                        type: 'error',
                                        duration: 2000,
                                        customClass: 'message-center',
                                        onClose: function () {
                                            window.location.href = '/backstage/cater/dinnertable/tolist?vendorId='+ self.vendorId;
                                        }
                                    });
                                }
                            }
                        });
                    }
                });
            },
            // 筛选条件选择商户后，加载出商户下的桌台类型
            vendorSelect: function () {
                var self = this;
                // 获取当前选中的商户uuid
                let vendorUuid = self.conditions.vendorUuid.value;
                $.ajax({
                    url: "/backstage/cater/dinnertabletype/listByVendorUuid?vendorUuid="+vendorUuid,
                    type: "POST",
                    success: function(data) {
                        if (data && data.returnCode == "1") {
                            self.conditions.typeUuid.value = undefined;
                            self.typeList = data.returnMessage;
                            self.disabledType = false;
                        }
                    }
                });
            },
            vendorSelect1: function () {
                var self = this;
                // 获取当前选中的商户uuid
                let vendorUuid = self.dinnertable.vendorUuid;
                $.ajax({
                    url: "/backstage/cater/dinnertabletype/listByVendorUuid?vendorUuid="+vendorUuid,
                    type: "POST",
                    success: function(data) {
                        if (data && data.returnCode == "1") {
                            self.typeList1 = data.returnMessage;
                            self.disabledType1 = false;
                        }
                    }
                });
            },
            identityFormatter: function (row, column, cellValue, position) {
                for (let identity of this.identityList) {
                    if (identity.value === cellValue) {
                        return identity.name;
                    }
                }
            },
            handleSizeChange: function (val) {
                this.pageSize = val;
                this.queryList();
            },
            handleCurrentChange: function (val) {
                this.currentPage = val;
                this.queryList();
            },
            handleQuery() {
                this.currentPage = 1;
                this.queryList();
            },
            handleClear() {
                this.conditions['name#no'].value = undefined;
                this.conditions.usingStatus.value = undefined;
                this.conditions.vendorUuid.value = undefined;
                this.conditions.typeUuid.value = undefined;
            },
            // 新增桌台弹出dailog
            showDailog: function () {
                this.dialogFormVisible = true;
                this.openText = "新增桌台";
                $("#addDialog").css('display','block');
                $("#editDialog").css('display','none');
                this.dinnertable.uuid = '';
                this.dinnertable.categoryUuid = '';
                this.dinnertable.no = '';
                this.dinnertable.name = '';
                this.dinnertable.maxPerson='';
                this.dinnertable.vendorUuid='';
            },
            // 编辑桌台弹出dialog
            editDailog: function(index,row){
                this.dialogFormVisible = true;
                this.openText = "编辑桌台";
                $("#addDialog").css('display','none');
                $("#editDialog").css('display','block');
                this.dinnertable = row;
                this.vendorSelect1();
            },
            // 删除桌台
            handleDelete(index, row) {
                let self = this;
                self.$confirm('确认要删除此桌台信息?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(() => {
                    $.ajax({
                        url: "/backstage/cater/dinnertable/delete",
                        type: "POST",
                        data: JSON.stringify([row.uuid]),
                        contentType: "application/json;charset=UTF-8",
                        dataType: "json",
                        success: function (data) {
                            if (data && data.returnCode === 1) {
                                self.$message({
                                    message: '删除桌台成功',
                                    type: 'success',
                                    customClass: 'message-center',
                                    duration: 1500,
                                });
                                self.handleQuery();
                            } else {
                                self.$message({
                                    message: data.returnNote,
                                    type: 'warning',
                                    customClass: 'message-center',
                                    duration: 2000,
                                });
                            }
                        }
                    });
                });
            },
            handleCommand(command) {
                this.$message('click on item ' + command);
            },
            // 列表批量操作2-批量导出
            handleCommand2(command) {
                this.$message('click on item ' + command);
            },
            tableAllCheckFn(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row, this.tableAllCheck)
                    })
                }
            },
            toggleMoreSearch() {
                this.filterMore = !this.filterMore;
            },
            queryList() {
                app.loading = true;
                let queryMessage = {
                    "queryPage": this.currentPage,
                    "pageShow": this.pageSize,
                    "queryParams": this.conditions,
                    "sortMap": {
                        "uuid": "desc"
                    }
                };
                $.ajax({
                    url: "/backstage/cater/dinnertable/list",
                    type: "POST",
                    data: JSON.stringify(queryMessage),
                    contentType: "application/json;charset=UTF-8",
                    dataType: "json",
                    success: function (data) {
                        if (data && data.returnCode === 1) {
                            app.dinnerList = data.returnMessage;
                            app.totalNum = data.pager.totalNum;
                        }
                        app.loading = false;
                    }
                });
            }
        }
    });


</script>
</html>